<template>
  <div>
    <el-tag>公司基本信息</el-tag>
    <el-form :model="companyForm">
      <el-row :gutter="80">
        <el-col :span="6">
          <el-form-item label="公司名称">
            <el-input v-model="companyForm.name" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="公司英文名称">
            <el-input v-model="companyForm.englishTitle" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-tag>公司联系信息</el-tag>
      <!--  第一行-->
      <el-row :gutter="30">
        <el-col :span="6">
          <el-form-item label="邮箱">
            <el-input v-model="companyForm.email" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="地址">
            <el-input v-model="companyForm.address" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="电话号码">
            <el-input v-model="companyForm.phone" />
          </el-form-item>
        </el-col>
      </el-row>
      <!--  联系信息第二行-->
      <el-row :gutter="30">
        <el-col :span="6">
          <el-form-item label="qq号">
            <el-input v-model="companyForm.qq" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="微信号">
            <el-input v-model="companyForm.weChat" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="微博号">
            <el-input v-model="companyForm.weiBo" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-tag>公司logo</el-tag>
    <el-card>
      <el-image :src="companyForm.addBaseUrl" />
      <el-button
        type="primary"
        @click="dialogEditVisible=true"
      >
        修改
      </el-button>
    </el-card>
    <div class="update">
      <el-button @click="commit">
        修改
      </el-button>
    </div>
    <el-dialog :visible.sync="dialogEditVisible">
      <el-tag>图片上传</el-tag>
      <el-upload
        ref="upload"
        action="http://localhost:8085/upload"
        list-type="picture-card"
        :on-success="fileSuccess"
        :on-preview="handlePictureCardPreview"
        :multiple="true"
        :on-remove="handleRemove"
      >
        <i class="el-icon-plus" />
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img
          width="100%"
          :src="dialogImageUrl"
          alt=""
        >
      </el-dialog>
      <el-row>
        <el-col :offset="18">
          <el-button
            type="primary"
            @click="updateImg"
          >
            修改
          </el-button>
          <el-button @click=" dialogEditVisible = false">
            取 消
          </el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { request } from '@/network/request';
import { basePath } from '@/commom/commom';

export default {
  name: 'CompanyList',
  data() {
    return {
      companyForm: {
        intro: '',
        logo: '',
        imgUrl: '',
        name: '',
        englishTitle: '',
        copyright: '',
        weChat: '',
        qq: '',
        email: '',
        weiBo: '',
        phone: '',
        address: '',
        addBaseUrl: '',
      },
      dialogImageUrl: '',
      dialogEditVisible: false,
      dialogVisible: false,
    };
  },
  created() {
    this.getCompanyModel();
  },
  methods: {
    getCompanyModel() {
      request({
        url: '/company/list',
      }).then((res) => {
        if (res.code !== 200) return;
        this.companyForm = res.data;
        this.companyForm.addBaseUrl = basePath + res.data.logo;
      });
    },
    fileSuccess(file) {
      // eslint-disable-next-line prefer-destructuring
      this.companyForm.logo = file.data[0];
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    updateImg() {
      console.log(this.companyForm);
      request({
        url: '/company/update',
        params: this.companyForm,
        method: 'post',
      }).then((res) => {
        if (res.code !== 200) {
          this.dialogEditVisible = false;
          return this.$message.error('图片修改失败');
        }
        this.dialogEditVisible = false;
        this.$refs.upload.clearFiles();
        this.getCompanyModel();
        return this.$message.success('图片修改成功');
      });
    },
    commit() {
      request({
        url: '/company/update',
        params: this.companyForm,
        method: 'post',
      }).then((res) => {
        if (res.code !== 200) {
          return this.$message.error('公司信息修改失败');
        }
        this.getCompanyModel();
        return this.$message.success('公司信息修改成功');
      });
    },
  },
};
</script>

<style scoped>
.el-card{
  width: 200px;
  height: 230px;
}
.el-image{
  width: 150px;
  height: 150px;
}
.update{
  display: flex;
  justify-content: flex-end;
}

</style>
